<!--各区域每月医废产量-->
<template>
    <div class="recycleTable">
        <thead>
            <tr>
                <th>区域（吨）</th>
                <th>7月</th>
                <th>8月</th>
                <th>9月</th>
                <th>10月</th>
                <th>11月</th>
                <th>12月</th>
                <th>合计</th>
            </tr>
        </thead>
        <div class="content">
            <tbody>
                <tr v-for="(item,index) in dataSource" :key="index" :class="{on:index%2==0,off:index%2!=0}">
                    <td>{{item.city}}</td>
                    <td v-for="(val,i) in item.maps" :key="i">
                        {{(val.sum/1000).toFixed(2)}}
                    </td>
                    <td>{{(item.total/1000).toFixed(2)}}</td>
                </tr>
            </tbody>
        </div>
    </div>
</template>

<script>
    import { getAction } from '@/api/manage'

    export default {
        name: 'ledgerOfMonth',
        data() {
            return {
                dataSource: [],
                activeIndex: 0
            }
        },
        mounted() {
            //参数赋值
            this.getMedicalWasteData();
        },
        methods: {
            async getMedicalWasteData() {
                let res = await getAction('/hc/Statistical/returnWeightByAreaAndMonth');
                if (res && res.success) {
                    this.dataSource = res.result || [];
                }
            },
        },

    }
</script>

<style lang="less" scoped>
    .recycleTable {
        table-layout: fixed;
        width: 90%;
        align-items: center;
        margin: auto;
        thead {
            display: table;
            width: 100%;
            table-layout: fixed;
            height: 0.2rem;
            color: #52E2FF;
            font-size: 0.2rem;
            tr {
                display: table-row;
                vertical-align: inherit;
                text-align: center;
                font-size: 0.17rem;
                margin-bottom: 10px;
            }
            th{
                padding-bottom: 3px;
            }

        }
        .content {
            width: 100%;
            text-align: center;
            overflow: hidden;
            color: #FFFFFF;
            .off {
                /*background-color: #030C44;*/
                background-color: rgba(255,255,255,0.3);
            }

            .on {

            }
            tbody {
                text-align: center;
                display: block;
                height: 3.6rem;
                overflow-y: hidden;

                tr {
                    line-height: 0.5rem;
                    display: table;
                    width: 100%;
                    table-layout: fixed;
                }

                td {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 0.18rem;
                }
            }

        }

    }
</style>
